<!DOCTYPE >
<html lang="zh-cn">

	<head>
		<title>后台管理-线上线下内容管理功能</title>
		<% include ./partials/head %>
			<style type="text/css">
				#onlineTags,
				#offlineTags {
					margin-bottom: 30px;
				}
				#onlineTags p,
				#offlineTags p {
					margin-top: 10px;
				}
				#onlineTags li,
				#offlineTags li {
					display: inline-block;
					margin-right: 10px;
					list-style-type: none;
					height: 30px;
					line-height: 30px;
					padding: 0px 20px;
				}
				#onlineTags li i,
				#offlineTags li i {
					margin-left: 10px;
					cursor: pointer;
				}
			</style>
			<script type="text/javascript">
				oAdd = {
					operation: function() {
						$(".box-content").on("click", ".remove", function() {
							$this = $(this);
							$this.parents("li").remove();
						}).on("click", "#onlineContentAdd", function() {
							var content = $("#onlineContent").val();
							var liContent = '<li class="label label-success"><span>' + content + '</span><i class="remove glyphicon glyphicon-remove"></i></li>'
							$("#onlineUL").append($(liContent));
						}).on("click", "#onlineContentAllAdd", function() {
							var content = $("#onlineContentAll").val().split("，");
							
							var liContent ="";
							for(i=0;i<content.length;i++){
								liContent+='<li class="label label-success"><span>' + content[i] + '</span><i class="remove glyphicon glyphicon-remove"></i></li>'
							}
							$("#onlineUL").html(liContent);
						}).on("click", "#offlineContentAdd", function() {
							var content = $("#offlineContent").val();
							var liContent = '<li class="label label-success"><span>' + content + '</span><i class="remove glyphicon glyphicon-remove"></i></li>'
							$("#offlineUL").append($(liContent));
						}).on("click", "#offlineContentAllAdd", function() {
							var content = $("#offlineContentAll").val().split("，");
							
							var liContent ="";
							for(i=0;i<content.length;i++){
								liContent+='<li class="label label-success"><span>' + content[i] + '</span><i class="remove glyphicon glyphicon-remove"></i></li>'
							}
							$("#offlineUL").html(liContent);
						}).on("click", "#save", function() {
							//保存
							var onlineTags = [];
							var offlineTags = [];
							$('#onlineUL li').each(function() {
								onlineTags.push($(this).text());
							})
							$('#offlineUL li').each(function() {
								offlineTags.push($(this).text());
							})
							$.post("/admin/contentManage/modify", {
								"onlineTags": onlineTags,
								"offlineTags": offlineTags
							}, function(json) {
								if (json.code == 0) {
									history.go(0);
								} else {
									alert(json.msg);
								}
							}, 'json');
						})
					},
					init: function() {
						this.operation();
					}
				}
				$(document).ready(function() {
					oAdd.init();
				})
			</script>
	</head>

	<body>
		<header>
			<% include ./partials/header %>
		</header>
		<div class="ch-container">
			<div class="row">
				<% include ./partials/sidebar %>
					<!-- 页面内容 -->
					<div id="content" class="col-lg-10 col-sm-10">
						<div class="row">
							<ul class="breadcrumb">
								<li>
									线上，线下标签内容管理
								</li>
							</ul>
						</div>

						<% if (typeof errMsg != "undefined") { %>
							<div class="alert alert-danger">
								<button type="button" class="close" data-dismiss="alert">&times;</button>
								<strong><%= errMsg %></strong>
							</div>
							<% } %>

								<div class="row">
									<div class="box col-md-12">
										<div class="box-inner">

											<div class="box-content">
												<div id="onlineTags">
													<p>线上标签:</p>
													<ul id="onlineUL">
														<% if (onlineContent.length>0) { %>
															<% onlineContent.forEach(function(onlineTag,index) { %>
																<li class="label label-success"><span><%=onlineTag %></span><i class="remove glyphicon glyphicon-remove"></i></li>
																<% }) %>
																	<% } %>
													</ul>

													<div style="margin-top:10px">
														<input rows="5" id="onlineContent" placeholder="输入线上内容">
														</textarea>
														<span class="btn btn-info" id="onlineContentAdd"><i class="glyphicon glyphicon-plus"></i>单个添加</span>
													</div>
													<div style="margin-top:10px">
														<textarea rows="5" id="onlineContentAll" placeholder="批量替换线上内容，以中文逗号隔开">
															批量替换线上内容，以逗号隔开
														</textarea>
														<span class="btn btn-info" id="onlineContentAllAdd"><i class="glyphicon glyphicon-plus"></i>批量替换</span>
													</div>
												</div>
												<div id="offlineTags">
													<p>线下标签:</p>
													<ul id="offlineUL">
														<% if (offlineContent.length>0) { %>
															<% offlineContent.forEach(function(offlineTag,index) { %>
																<li class="label label-success"><span><%=offlineTag %></span><i class="remove glyphicon glyphicon-remove"></i></li>
																<% }) %>
																	<% } %>

													</ul>
													<div style="margin-top:10px">
														<input rows="5" id="offlineContent" placeholder="输入线下内容">
														</textarea>
														<span class="btn btn-info" id="offlineContentAdd"><i class="glyphicon glyphicon-plus"></i>添加</span>
													</div>
													<div style="margin-top:10px">
														<textarea rows="5" id="offlineContentAll" placeholder="批量替换线下内容，以中文逗号隔开">
															批量替换线下内容，以逗号隔开
														</textarea>
														<span class="btn btn-info" id="offlineContentAllAdd"><i class="glyphicon glyphicon-plus"></i>批量替换</span>
													</div>
												</div>

												<button class="btn btn-success" id="save" type="submit"><i class="glyphicon glyphicon-shopping-cart"></i>保存</button>

											</div>

										</div>
									</div>
								</div>
					</div>

			</div>

			<% include ./partials/footer %>
		</div>
		<% include ./partials/external %>
	</body>

</html>